
<!--<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>用户列表demo</title>
	<!-- html是一种解释执行的语言 -->
	<!-- 导入JS函数类库 -->
	<!--	加入jquery-->
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script>
		//让页面加载完成之后,再次调用
		//编程方式: 函数式编程
		$(function(){
			/**
			 * 常见Ajax写法:
			 * 	 1.$.ajax({})
			 *   2.$.get()   get类型
			 *   3.$.post()
			 * 	 4.$.getJSON()
			 */

			/**
			 * 语法说明:
			 * 	$.get(url,data,function(data){},dataType)
			 * 参数说明:
			 * 		1.url: 请求服务器的网址
			 * 		2.data: 前端向服务器传递的参数  字符串
			 * 		3.回调函数: 请求成功之后开始回调
			 * 		4.dataType: 返回值结果的数据类型. 可以省略自动判断
			 *
			 */
			var url = "http://localhost:8088/getAll"
			/**
			 * 关于data语法: id=100  name="tom"
			 * 写法: 25上课!!!!
			 * 		1.JS对象写法
			 * 		  {id:100,name:"tom"}
			 * 		2.字符串拼接
			 * 		  id=100&name=tom
			 */
					//var data = "id=100&name=tom"
			var data = {id:100,name:"tom"}

			//JS可以将接收的JSON串动态转化为JS对象
			$.get(url,function(data){
				//循环遍历返回值
				//of 关键字 直接获取遍历对象
				for(user of data){
					//获取数据信息
					// ` 特别注意要加上 头`尾` 表示ES5的语法
					var tr =
							// 添加user列所对应的所获取的数据库的数值
							`<tr align="center">
							<td>${user.id}</td>
							<td>${user.name}</td>
							<td>${user.age}</td>
							<td>${user.sex}</td>

						 </tr>`
					//将tr标签追加到表格中
					$("#tab1").append(tr)
				}
			})
		})

		/*
         1. 基本循环
         for(var i=0; i<data.length;i++){
             console.log(data[i])
         }

         2.in 关键字
         for(index in data){
             console.log(data[index])
         }

         */

	</script>
</head>
<!--绘制从数据库取出的数据在页面中显示的格式-->
<body>
<table id="tab1" border="1px" align="center" width="80%">
	<tr>
		<td colspan="4" align="center"><h1>用户列表</h1></td>
	</tr>
	<tr>
		<td align="center">编号</td>
		<td align="center">姓名</td>
		<td align="center">年龄</td>
		<td align="center">性别</td>
	</tr>
</table>
</body>
</html>
